<template>
  <div id="wK_historySearch">
    <h3 class="h3">车辆保养查询</h3>
    <a-form-model layout="inline" :model="form" :colon="false" style="margin: 10px 0">
      <a-form-model-item label="车辆牌照">
        <a-input v-model="form.carCode" placeholder="请输入车辆牌照" allow-clear></a-input>
      </a-form-model-item>
      <a-form-model-item label="选择时间">
        <a-date-picker v-model="begin_time" :disabled-date="disabledStartDate" placeholder="开始时间"
                       @openChange="handleStartOpenChange"/>
        <span style="color: #9fb043; font-size: 18px; padding: 0 5px">—</span>
        <a-date-picker v-model="end_time" :disabled-date="disabledEndDate" placeholder="结束时间" :open="endOpen"
                       @openChange="handleEndOpenChange"/>
      </a-form-model-item>
      <a-form-model-item>
        <a-button type="primary" @click="getdata">查询</a-button>
      </a-form-model-item>
    </a-form-model>
    <div class="tableclass">
      <my-table :rowKey="(record) => record.id" style="min-height: 94%" :data-source="data1" :columns="columns" :pagination="false">
        <template slot="carMaintainBeforeFileInfoList" class="solve-img" slot-scope="carMaintainBeforeFileInfoList">
          <div v-viewer>
            <img class="byimg" :src="img.fileUrl" data-first-index="0" :data-secondIndex="indexs" v-for="(img, indexs) in carMaintainBeforeFileInfoList" :key="indexs" alt/>
          </div>
        </template>
        <template slot="carMaintainAfterFileInfoList" slot-scope="carMaintainAfterFileInfoList" class="solve-img">
          <div v-viewer>
            <img class="byimg" v-for="(img, indexs) in carMaintainAfterFileInfoList" :key="indexs" :src="img.fileUrl" alt/>
          </div>
        </template>
        <span slot="operate" slot-scope="text, operate">
          <a class="solvebtn" style="color: #1890ff" @click="showModal(operate)">保养详情</a>
        </span>
      </my-table>
      <div class="content-bottom clearfix">
        <div class="page-box">
          <a-pagination :show-total="(total) => `共 ${total} 条记录`" v-model="form.current" :total="total" :defaultPageSize="form.pageSize" :item-render="itemRender" @change="pagechangeFn"/>
        </div>
      </div>
    </div>
    <!-- 弹窗 -->
    <a-modal title="保养详情" width="35%" :visible="visible" @cancel="handleCancel" :footer="null">
      <a-form-model class="xqmodal" :label-col="{ span: 5 }" :wrapper-col="{ span: 12 }">
        <a-form-model-item label="保养时间:">{{this.detail.maintainTime}}
        </a-form-model-item>
        <a-form-model-item label="车辆牌号:">{{this.detail.carCode }}
        </a-form-model-item>
        <a-form-model-item label="描述:">{{this.detail.note}}
        </a-form-model-item>
        <a-form-model-item label="保养前图片:">
          <div v-viewer>
            <img class="byimgB" :src="img.fileUrl" v-for="(img, indexs) in this.detail.carMaintainBeforeFileInfoList" :key="indexs" alt/>
          </div>
        </a-form-model-item>
        <a-form-model-item label="保养后图片:">
          <div v-viewer>
            <img class="byimgB" :src="img.fileUrl" v-for="(img, indexs) in this.detail.carMaintainAfterFileInfoList" :key="indexs" alt/>
          </div>
        </a-form-model-item>
      </a-form-model>
    </a-modal>
  </div>
</template>

<script>
import "viewerjs/dist/viewer.css";
import Viewer from "v-viewer";
import Vue from "vue";

Vue.use(Viewer);
import moment from "moment";
import "moment/locale/zh-cn";

export default {
  name: "index",
  data() {
    return {
      visible: false,
      title: "",
      isshow: false,
      equipmentData: {},
      //详情数据
      detail: [],
      myCharts: "",
      isEcharts: true,
      endOpen: false,
      begin_time: "", //开始时间
      end_time: "", //结束时间
      form: {
        current: 1,
        size: 10,
        carCode: "",
        maintainStartTime: "",
        maintainEndTime: "",
      },
      carMaintainBeforeFileInfoList: [],
      carMaintainAfterFileInfoList: [],
      columns: [
        {
          title: "序号",
          dataIndex: "id",
          customRender: (text, record, index) =>
              `${(this.form.current - 1) * this.form.size + index + 1}`,

          align: "center",
        },
        {
          title: "用户名",
          dataIndex: "nickname",
          scopedSlots: {
            customRender: "nickname",
          },
          align: "center",
        },
        {
          title: "车辆牌照",
          dataIndex: "carCode",
          scopedSlots: {
            customRender: "carCode",
          },
          align: "center",
        },
        {
          title: "保养时间",
          dataIndex: "maintainTime",
          scopedSlots: {
            customRender: "maintainTime",
          },
          align: "center",
        },
        {
          title: "保养前",
          key: "carMaintainBeforeFileInfoList",
          dataIndex: "carMaintainBeforeFileInfoList",
          scopedSlots: {
            customRender: "carMaintainBeforeFileInfoList",
          },
          align: "center",
        },
        {
          title: "保养后",
          dataIndex: "carMaintainAfterFileInfoList",
          scopedSlots: {
            customRender: "carMaintainAfterFileInfoList",
          },
          align: "center",
        },
        {
          title: "操作",
          dataIndex: "operate",
          scopedSlots: {
            customRender: "operate",
          },
          align: "center",
        },
      ],
      data1: [],
      total: 0,
    };
  },
  methods: {
    showModal(data) {
      this.detail = data;
      this.visible = true;
    },
    handleCancel(e) {
      this.visible = false;
    },
    //日期方法
    disabledStartDate(startValue) {
      const endValue = this.end_time;
      if (!startValue || !endValue) {
        return false;
      }
      return startValue.valueOf() > endValue.valueOf();
    },
    disabledEndDate(endValue) {
      const startValue = this.begin_time;
      if (!endValue || !startValue) {
        return false;
      }
      return startValue.valueOf() >= endValue.valueOf();
    },
    handleStartOpenChange(open) {
      if (!open) {
        this.endOpen = true;
      }
    },
    handleEndOpenChange(open) {
      this.endOpen = open;
    },
    //获取数据方法
    getdata() {
      var maintainEndDate = new Date(this.end_time);
      var maintainStartDate = new Date(this.begin_time);
      var maintainEndTime = maintainEndDate.getTime();
      var maintainStartTime = maintainStartDate.getTime();
      this.form.maintainStartTime = maintainStartTime;
      this.form.maintainEndTime = maintainEndTime;
      this.$api.carmaintain(this.form).then((res) => {
        if (res.data.code == 0) {
          this.total = res.data.total;
          var result = res.data.data;
          var showfile = require("@/assets/public/影像资料.png");
          result.forEach((v) => {
            v.maintainTime = moment(v.maintainTime).format(
                "YYYY-MM-DD HH:mm:ss"
            );
          });
          for (let index in result) {
            let itemFirst = result[index].carMaintainAfterFileInfoList;
            let itemsFirst = result[index].carMaintainBeforeFileInfoList;
            // let _img=[];
            // itemFirst.forEach((item)=>{
            // 	_img.push(item.fileUrl)
            // })
            for (let key in itemFirst) {
              result[index].carMaintainAfterFileInfoList[
                  key
                  ].showfile = showfile;
            }
            for (let key in itemsFirst) {
              result[index].carMaintainBeforeFileInfoList[
                  key
                  ].showfile = showfile;
            }
          }
          this.data1 = result;
          console.log(this.data1);
        }
      });
    },

    // 设备情况
    equipmentFn(data, index) {
      console.log(data, index);
      this.title = "设备详情";
      this.isshow = true;
    },

    // 分页方法
    itemRender(current, type, originalElement) {
      if (type === "prev") {
        return<a > 上一页 < /a>;
      } else if (type === "next") {
        return<a > 下一页 < /a>;
      }
      return originalElement;
    },
    pagechangeFn(page, pageSize) {
      this.page.current = page;
      this.getdata();
    },
  },

  mounted() {
    this.getdata();
  },
};
</script>
<style scoped lang="scss">
.byimg {
  width: 50px;
  height: 25px;
}

.byimgB {
  width: 90px;
  height: 50px;
}

::v-deep .solve-img {
  height: 26px;
}

::v-deep .solve-img img {
  width: 24px;
  height: 20px;
  margin-right: 5px;
}

/* 导出按钮 */
.download-btn {
  margin-right: 40px !important;
  color: #2c6a5f;
  cursor: pointer;
  font-size: 16px;
  height: 100%;
  padding-top: 1%;
}

.solve-img {
  display: inline-block;
  justify-content: space-evenly;
}


#wK_historySearch {
  width: 100%;
  height: 100%;
  padding: 1%;
  box-sizing: border-box;
  position: relative;

  .exportbtn {
    background-color: transparent;
    border: 0;
    color: #207064;
  }

  .content-bottom {
    margin-top: 12px;
    float: right;
  }

  .page-box {
    float: right;
  }

}

/* 表格样式 */
.tableclass {
  width: 100%;
  height: 86%;
}



</style>
